<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 将以下数据渲染为六个按钮
        const data = [
            {
                name: '苹果',
                id: 0,
            },
            {
                name: '香蕉',
                id: 1,
            },
            {
                name: '梨',
                id: 2,
            },
            {
                name: '草莓',
                id: 3,
            },
            {
                name: '橘子',
                id: 4,
            },
            {
                name: '葡萄',
                id: 5,
            },
        ];
        // 2. 疯狂点击每个按钮
        // 3. 统计最近一分钟内点击次数最多的三个水果
        // ⭐
        for (const item of data) {
            item.click = [];
            const el = document.createElement('button');
            el.innerText = item.name;
            el.addEventListener('click', function () {
                // 当前时间戳
                const now = Date.now();
                item.click.push(now);
                // 使用filter筛选最近一分钟的时间戳 
                // getCount是个函数
                const getCount = (dataItem) => dataItem.click.filter(t => now - t <= 6000).length;
                const res = data
                    .concat()
                    .sort((a, b) => getCount(b) - getCount(a))
                    .map(d => d.name)
                    .slice(0, 3);
                const btns = document.querySelectorAll('button');
                for (let i = 0; i < btns.length; i++) {
                    btns[i].innerText = data[i].name + getCount(data[i]);                    
                }
                console.log(res);
            })
            document.body.appendChild(el);
        }
    </script>
</body>
</html>